scripts/frontend.sh
   yarn add @babel/preset-react --dev
   yarn add react react-dom prop-types

Dokumentacija: https://symfony.com/doc/current/frontend/encore/reactjs.html

Jei paimate pavyzdį, tai scripts/frontend.sh
   yarn

Iš assets/js eis į build/js/app.js, nes taip parašėme webpack.config.js

scripts/frontend.sh
  yarn watch

Rezultato ieškoti:
  build/js/app.js

Dokumentacija:
  https://symfony.com/doc/current/frontend/encore/reactjs.html
  https://yarnpkg.com/lang/en/docs/package-json/#toc-scripts

Sugeneruota su scripts/backend.sh
    bin/console make:controller People

Patikrinimui:
 * http://127.0.0.1:8000/people

Dokumentacija:
 * https://symfony.com/doc/current/bundles/SymfonyMakerBundle/index.html

Patikrinimui:
  http://127.0.0.1:8000/people

Dokumentacija:
  https://reactjs.org/docs/hello-world.html

Klaidą buvo galima patyti per Naršyklės konsolę:
  ReferenceError: ReactDOM is not defined

Esmė: React'ą turėjome node_modules (prsiminkime yarn... komandą), bet WebPack Encore nežinojo, kad reikia jį įtraukti.

Dokumentacija (neatsimenu, kur radau, bet čia geras pavyzdys):
  https://artemzhuravlev.com/blog/symfony-reactjs-using-encore/

Bonus per konsole siūlo (ir programuoti padės):
  Download the React DevTools for a better development experience: https://fb.me/react-devtools

scripts/frontend.sh
  yarn add axios
  yarn watch

Pridėta į app.js, kad būtų galima patikrinti:
  public/build/js/app.js

Dokumentacija:
  https://www.npmjs.com/package/axios
  https://yarnpkg.com/lang/en/docs/cli/add/
  https://yarnpkg.com/lang/en/docs/cli/run/

Jei naudojamas commit'as kaip pavyzdys, scripts/frontend.sh
  yarn

Čia viena iš pavyzdžių, kaip galima panaudoti išorinę bilbioteką,
kad mūsų kodas būtų paprastesnis.

Kad kodas veiktų, paleidžiame per scripts/frontend.sh
  yarn watch

Patirikrinimui:
  http://127.0.0.1:8000/people

Patirkinimui, atsidarome Naršyklės console langą
  Turėtų būti kažkas į Object { "build/app.css": "/build/app.css", "build/app.js": "/build/app.js", "build/runtime.js": "/build/runtime.js", "build/vendors~app.js": "/build/vendors~app.js" }

Dokumentacija:
  https://www.npmjs.com/package/axios

Pradedame nuo "...", nes užsikrauna ne iš karto, kad naudotoja matytų, jog pasikeis.

Kodo generavimu paleisti per scripts/frontend.sh
  yarn watch

Rezultatas matysis atsidarius pusplaį:
  http://127.0.0.1:8000/people

Patikrinimui pabandykite (manifest.json reikšmė pasikeis):
  yarn dev
  yarn build

Dokumentacija:
  https://www.w3schools.com/jsref/prop_html_innerhtml.asp
  https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
  https://developer.mozilla.org/en-US/docs/Web/API/Node/innerText
  https://symfony.com/doc/current/frontend/encore/versioning.html
  https://yarnpkg.com/lang/en/docs/cli/run/

Problema: naudojame React ir axious kodą tik People puslapyje, bet JavaScript įkraunamas visur. Taigi Pagrindiniame puslapyje Console'je metamos klaidos.
Sprendimas: įterpti JavaScript dalį, kuri būtų virš. Naudojami globalūs JavaScript kintamieji ("var", bet ne "let")

Gerosios praktikos: naudoti data-... parametrus
Geresnis sprendimas: patikrinti ar elementas egzistuoja

Kodas sukeneruotas per scripts/frontend.sh
  yarn watch

Patikrinimui, ar veikia:
  Tiek pagrindiniame, tiek /people puslapyje Naršyklės Console nerodo klaidos

Dokumentacija:
  https://symfony.com/doc/current/frontend/encore/server-data.html
  https://www.w3schools.com/js/js_datatypes.asp

Nes jau sunku per puslapius vaikščioti.

Patrikrinimui (viršuje turėtų būti navigacijos juosta):
 http://127.0.0.1:8000/people
 http://127.0.0.1:8000/

Gali prireikti per scripts/backend.sh
  bin/console cache:clear

Dokumentacija:
  https://symfony.com/doc/current/reference/twig_reference.html
  https://twig.symfony.com/doc/2.x/tags/extends.html
  https://getbootstrap.com/docs/4.3/components/navbar/

Kuris bus naudojamas tik viename puslapyje
Nes jau nebereikia mokintis parametrų perdavimo.

Priminimui: CSS failai yra įtraukiami iškviečiant require('../css/app.scss') ar pan.

Kodas sugeneruojamas per scripts/frontend.sh
  yarn watch

Patikrinimui, žiūrėti sugeneruotą:
  public/build/validation.js
  (Gali tekti iš naujo paleisti "yarn watch")

Dokumentacija:
  https://symfony.com/doc/current/frontend/encore/shared-entry.html
  https://symfony.com/doc/current/frontend/encore/split-chunks.html

Pridedame validacijos failą tik People puslapyje.

Kodo sugeneruojamas (nukopijuojamas į build katalogą) node konteineryje:
  yarn watch

Lyginant su senesnėmis Symfony/Encore versijomis buvo naudojama asset komanda, kurią dabar pakeičia gudresnė encore_entry_script_tags.

Patikrinimui, ar veikia:
  http://127.0.0.1:8000/people keičiant teksta su klaviatūra, turi šalia rodyti

Symfony turi galingą takų (angl. route) sistemą,
tai galima perduoti argumentus užklausoje, kaip argumentus į funkciją.

Pasidarome apribojimą, kad būtų galima kviesti tik per POST metodą.
Vis dar nėra kaip pilnai ištestuoti.

Galima tik patikrinti per scripts/backend.sh
  bin/console debug:router
  bin/console debug:router validatePerson

Arba iš Linux:
  curl -X POST http://127.0.0.1:8000/validate/name
  curl -X POST http://127.0.0.1:8000/validate/labas

Dokumentacija:
  https://symfony.com/doc/current/routing.html
  https://symfony.com/doc/current/routing.html#matching-http-methods

Path irgi gali priimti parametrus

Javascript pergeneravimui iš scripts/frontend.sh
  yarn watch

Patirkinimui:
  http://127.0.0.1:8000/people keičiant tekstą, rodo: "Validuosiu su: /validate/name"

Dokumentacija:
  https://symfony.com/doc/current/frontend/encore/server-data.html
  https://symfony.com/doc/current/routing/generate_url_javascript.html

Keičiant laukelio turinį, grąžina ":)"
Rankomis galima pasibandyti pakeisti, ar pagauna ir klaidas.

Bet jau turime sujungtą Frontend'ą su Backend'u.

Dokumentacija:
  https://www.npmjs.com/package/axios

Nesinori parodyti spendimo pirmam namų darbui,
tai dėl paprastumo tiesiog įdedama į PHP failą.

Patikrinimui:
  Įvesti egzistuojantį vardą (pvz. Lukas) ir bus matoma laiminga šypsenėlė ":)"

Bandome apsisaugoti nuo netinkamų laukų pavadinimų.

JavaScript pergeneravimui per scripts/frontend.sh
  yarn watch

Dokumentacija:
  https://symfony.com/doc/current/create_framework/http_kernel_controller_resolver.html